<template>
  <div class="hore-add">
    <h3>添加英雄</h3>
    <hr />
    <!-- @submit.prevent阻止默认提交事件 -->
    <form class="form-horizontal" @submit.prevent="addHore()">
      <div class="form-group">
        <label class="col-sm-2 control-label">英雄名称</label>
        <div class="col-sm-10">
          <input v-model="horeFrom.horeName" type="text" class="form-control" style="width:200px" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">英雄性别</label>
        <div class="col-sm-10">
          <input v-model="horeFrom.gender" type="radio" value="男" /> 男
          <input v-model="horeFrom.gender" type="radio" value="女" /> 女
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-primary">添加</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      horeFrom: {
        horeName: "",
        gender: "女"
      }
    };
  },
  methods: {
    addHore() {
      if (!this.horeFrom.horeName.trim()) return alert("英雄不要为空哦");
      axios
        .post("http://localhost:3000/hore", {
          ...this.horeFrom,
          time: new Date()
        })
        .then(() => {
          // 添加成功返回主页
          this.$router.push("/hore");
        });
    }
  }
};
</script>